@model EditOptionViewModel

@{
	ViewBag.Title = Resources.Shared.AppName + " - " + string.Format(Resources.Shared.EditViewTitle, Model.IdentityDescription);
	string twoLettersCulture = new System.Globalization.CultureInfo(Culture).TwoLetterISOLanguageName;	
}

<div class="view-container">
  <div class="view-header-container">
    <h2 class="view-header">@string.Format(Resources.Shared.EditViewTitle, Model.IdentityDescription)</h2>
  </div>
  <!-- Top buttons -->
  <div class="view-button-container top-button-container">
    <input type="button" class="button back-button" title="@Resources.Shared.Back" onclick="document.location = '@Url.Action("Index","Option")'"/>
    <input type="button" class="button save-button" title="@Resources.Shared.Save" onclick="$('#OptionForm').submit()"/>	
  </div>
  <!-- Form begin -->
  <div class="entity-form-container">
    @using (Html.BeginForm("Edit", "Option", FormMethod.Post, new { id = "OptionForm" })) {
      @Html.ValidationSummary(true)
      <fieldset>
        <legend>@Resources.OptionResources.Option</legend>
		<div class="form">
          @Html.HiddenFor(model => model.Id)
				<div class="field">
				  <div class="label">
					@Html.Label(Resources.OptionResources.Name)
			  	  </div>
				  <div class="editor">
					@Html.TextBoxFor(model => model.Name)
					@Html.ValidationMessageFor(model => model.Name)
				  </div>
				</div>
				<div class="field">
				  <div class="label">
					@Html.Label(Resources.OptionResources.Description)
			  	  </div>
				  <div class="editor">
					@Html.TextBoxFor(model => model.Description)
					@Html.ValidationMessageFor(model => model.Description)
				  </div>
				</div>
		    <div class="field">
              <div class="label">
                @Html.Label(Resources.OptionResources.OptionType)
              </div>
              <div class="editor">
                @Html.DropDownListFor(model => model.OptionTypeId, new SelectList(Model.OptionTypeList, "Id", "IdentityDescription", Model.OptionTypeId))           
                @Html.ValidationMessageFor(model => model.OptionTypeId)
              </div>
		    </div>
        </div>
      </fieldset>
    }
    </div>
	<!-- Form end -->
	<!-- Tab strip begin -->
    <div id="OptionTab-container">
      <ul>
            
        <li>
		  <span class="tab_outer">
            <span class="tab_inner">
			  <a href="#productDetailsTab">@Resources.OptionResources.ProductDetails</a>
			</span>
          </span>
		</li>
      </ul>
	  <!-- ProductDetails Tab begin -->
      <div id="productDetailsTab">
        <!-- Selection begin -->
        <div class="selection-container">
		  <!-- Availables -->
		  <div class="selection selection-availables">
		    <div class="selection-buttons">
			  <input type="button" class="button add-button" title="@Resources.Shared.Add" onclick="ShowSelection('AvailablesProductDetails', 'AvailablesProductDetailsGrid', 'SelectedProductDetailsGrid', '@Url.Action("AddProductDetails", "Option")', '@Model.Id');"/>
			  <input type="button" class="button report-button" title="@(Resources.Shared.Report)" onclick="document.location = '@Url.Action("ReportProductDetails", "Option")?masterId=@Model.Id';" />
			</div>
			<div id="AvailablesProductDetails" style="display:none">
			  <div class="grid-view-search">
			    <form id="AvailablesProductDetailsGrid-form" action="">
				  <div class="grid-view-search-label-container">
				    @Html.Label(Resources.Shared.Search)
				  </div>
				  <div class="grid-view-search-input-container">
				    <input type="text" name="search" class="t-button" value="" />
				  </div>
				  <div class="grid-view-search-button-container">
				    <input type="button" name="search" class="button search-button" title="@(Resources.Shared.DoSearch)" onclick="Search('AvailablesProductDetailsGrid-form', 'AvailablesProductDetailsGrid','@Url.Action("LoadAvailablesProductDetails", "Option")', CreateProductDetailRowData, '@Model.Id');" />
				    <input type="button" name="clean" class="button clean-button" title="@(Resources.Shared.Clean)" onclick="ClearAndSearch('AvailablesProductDetailsGrid-form', 'AvailablesProductDetailsGrid','@Url.Action("LoadAvailablesProductDetails", "Option")', CreateProductDetailRowData, '@Model.Id');" />
				  </div>
			    </form>
			  </div>
			  <div class="grid-separator">
			  </div>		      
              <div id="ProductDetailsAvailables" class="grid-view-panel grid-view-availables">  
				<table id="AvailablesProductDetailsGrid"></table>
			  </div>
			  <div class="grid-separator">
			  </div>
			  <div class="grid-view-view-more">
			    <input id="AvailablesProductDetailsGrid-view-more-button" type="button" class="button view-more-button" value="@(Resources.Shared.ViewMore)" onclick="ViewMoreResults('AvailablesProductDetailsGrid', '@Url.Action("LoadAvailablesProductDetails", "Option")', CreateProductDetailRowData, 0, 10, '@Model.Id')" />
				<div class="grid-view-count">
					<span>@(Resources.Shared.GridTotal)<span id="AvailablesProductDetailsGrid-total-count" class="count-number"></span></span>    
				</div>
			  </div>
            </div>
		  </div>	  
		  <!-- Selected -->
		  <div class="selection selection-selected">
			<div class="grid-separator">
			</div>		  
            <div class="grid-view-panel">  
			  <table id="SelectedProductDetailsGrid"></table>
            </div>
			<div class="grid-separator">
			</div>
			<div class="grid-view-count">
              <span>@(Resources.Shared.GridTotal)<span id="SelectedProductDetailsGrid-total-count" class="count-number"></span></span>    
            </div>
          </div>
		</div>
        <!-- Selection end -->
        
      </div>
	  <!-- ProductDetails Tab end -->
    </div>
    <!-- Tab strip end -->
 
</div>
@section Scripts {
	@Scripts.Render("~/bundles/jqueryval")
	<script src="@Url.Content("~/Scripts/cultures/methods_" + twoLettersCulture + ".js")" type="text/javascript"></script>
<script type="text/javascript">

$("#OptionTab-container" ).tabs({
	show: function (event, ui) {
			if(ui.panel.id == "productDetailsTab")
			{
				$("#SelectedProductDetailsGrid").jqGrid({
					url: '@Url.Action("LoadSelectedProductDetails", "Option")?masterId=@Model.Id',
					datatype: 'json',
					mtype: 'POST',
					altRows: true,
					altclass: 'grid-alt-row',
					autowidth: true,
					rowNum: -1,
					colNames: ['Stock', 'Product', ''],
					colModel: [
					{ index: 'Stock', name: 'Stock', sortable: false, resizable: false},
					{ index: 'Product', name: 'Product', sortable: false, resizable: false},
						{ name: 'remove', sortable: false , classes: 'grid-cell-remove', resizable: false},
					],
					gridComplete: 
						function(){ 
							var ids = jQuery("#SelectedProductDetailsGrid").jqGrid('getDataIDs'); 
							for(var i=0;i < ids.length;i++)
							{ 
								var rowId = ids[i]; 
								var removeHtml = '<a href="#" onclick="return DeleteGridItem(\'SelectedProductDetailsGrid\', \'@Url.Action("RemoveProductDetails", "Option")\', \'' + rowId + '\', \'@Model.Id\')" title="@Resources.Shared.Remove"><img src="@Url.Content("~/Content/Images/CRUD/remove.png")"/></a>';
								$("#SelectedProductDetailsGrid").jqGrid('setRowData', ids[i], { remove: removeHtml }); 
							}
							
							$("#SelectedProductDetailsGrid").jqGrid('setLabel', 'Stock', '@Resources.ProductDetailResources.Stock', 'grid-header-data', '');
							$("#SelectedProductDetailsGrid").jqGrid('setLabel', 'Product', '@Resources.ProductDetailResources.Product', 'grid-header-data', '');
							$("#SelectedProductDetailsGrid").jqGrid('setLabel', 'remove', '', 'grid-header-delete', '');

							// Fix: jqgrid first row causes problems with fixed cols
							FixGridColumnSize({ gridId: "SelectedProductDetailsGrid", hasDelete: true });
						},
					loadComplete:
						function(data){ 
							SetGridTotalCount("SelectedProductDetailsGrid", data.records);
						}
				});

				$("#AvailablesProductDetailsGrid").jqGrid({
					url: '@Url.Action("LoadAvailablesProductDetails", "Option")?masterId=@Model.Id',
					datatype: 'json',
					mtype: 'POST',
					altRows: true,
					altclass: 'grid-alt-row',
					autowidth: true,
					multiselect: true,        
					colNames: ['Stock', 'Product'],
					colModel: [
					{ index: 'Stock', name: 'Stock', sortable: false, resizable: false},
					{ index: 'Product', name: 'Product', sortable: false, resizable: false},
					],
					gridComplete:
						function(){
							var ids = jQuery("#AvailablesProductDetailsGrid").jqGrid('getDataIDs'); 
							for(var i=0;i < ids.length;i++)
							{ 
								var rowId = ids[i]; 
								$("#AvailablesProductDetailsGrid").jqGrid('setRowData', ids[i], {  }); 
							}
						
							$("#AvailablesProductDetailsGrid").jqGrid('setLabel', 'Stock', '@Resources.ProductDetailResources.Stock', 'grid-header-data', '');
							$("#AvailablesProductDetailsGrid").jqGrid('setLabel', 'Product', '@Resources.ProductDetailResources.Product', 'grid-header-data', '');
							
							// Fix: jqgrid first row causes problems with fixed cols
							FixGridColumnSize({ gridId: "AvailablesProductDetailsGrid" });
						},
					loadComplete:
						function(data){ 
							SetGridTotalCount("AvailablesProductDetailsGrid", data.records);
						}
				});
			}
	}
});
function CreateProductDetailsRowData(data)
{
    return { Stock: data['cell'][0], Product: data['cell'][1] };
}

DefaultSearchEventTriggers("AvailablesProductDetailsGrid-form");

</script>
}
